<script setup lang="ts">
import { reactive } from "vue";
import { NewCMSContent } from "@/common/type/cms/content";
import { cloneDeep } from "@pureadmin/utils";
import NewTag from "@/components/NewTag/NewTag.vue";
import { routeOut } from "../home";

defineOptions({
  name: "VideoCard"
});
const props = defineProps({
  value: {}
});
const video = reactive<NewCMSContent>(cloneDeep(props.value));
</script>

<template>
  <div class="video-wrapper">
    <div
      class="video-wrapper-video"
      :style="`background-image: url('${video.banner.url}');`"
    />
    <div class="video-wrapper-desc">
      <div class="video-wrapper-desc-title">
        {{ video.title }}
      </div>
      <div style="color: #a1a1a1">
        <NewTag :label="video.remark" />
        <NewTag
          style="color: #4474ee"
          :label="video.type ? video.type[0].name : ''"
        />
        <span style="margin-left: 10px"
          >{{ video.type && video.area ? video.area[0].name : "未知地区" }}·{{
            video.type && video.language ? video.language[0].name : "未知语言"
          }}</span
        >
      </div>
      <div class="video-wrapper-desc-detail">
        {{ video.desc }}
      </div>
      <div class="video-wrapper-op">
        <iconify-icon-online
          style="
            cursor: pointer;
            height: 50px;
            width: 50px;
            position: absolute;
            top: 55%;
            left: 15px;
            transform: translateY(-50%);
          "
          icon="solar:play-circle-bold"
          v-on:click="routeOut(video)"
        />
        <div class="video-wrapper-op-button" style="left: 75px">
          <iconify-icon-online
            style="height: 35px; width: 35px"
            icon="stash:list-add-light"
          />
        </div>
        <div class="video-wrapper-op-button" style="left: 130px">
          <iconify-icon-online
            style="height: 35px; width: 35px"
            icon="la:thumbs-up-solid"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="css">
.video-wrapper {
  position: relative;
  height: 400px;
  width: 430px;
  overflow: hidden;
  border-radius: 20px;
  background-color: var(--newcms-background-color);
  box-shadow: rgba(25, 25, 25, 1) 2px 2px 10px 2px;
}

.video-wrapper-desc-title {
  font-size: var(--newcms-font-size-sub-title);
  color: #dadada;
}

.video-wrapper-video {
  height: 60%;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.9) inset 0 -25px 20px 10px;
  background-size: cover; /* 保持宽高比，同时覆盖整个元素 */
  background-position: center; /* 居中显示 */
  background-repeat: no-repeat; /* 不重复 */
}

.video-wrapper-desc {
  position: absolute;
  padding: 10px;
  top: 50%;
  height: 50%;
}

.video-wrapper-desc-detail {
  font-size: var(--newcms-font-size-desc);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  color: #838383;
}

.video-wrapper-op {
  position: absolute;
  height: 70px;
  width: 100%;
  bottom: 10px;
  left: 0;
}

.video-wrapper-op-button {
  height: 45px;
  width: 45px;
  position: absolute;
  top: 55%;
  transform: translateY(-50%);
  border-radius: 50%;
  background-color: #0b1e15;
  cursor: pointer;
  color: var(--newcms-font-color-normal);
  padding: 5px;
  transition: all 300ms;
  overflow: hidden;
}

.video-wrapper-op-button:hover {
  background-color: #303030;
  color: white;
}
</style>
